<template>
    <div class="good-detail-container">
        <!--轮播图-->
        <div class="mui-slider" style="height: 100%">
            <div class="mui-slider-group">
                <div class="mui-slider-item"><a href="#"><img :src="'../../images/'+good_img1+'.jpg'" /></a></div>
                <div class="mui-slider-item"><a href="#"><img :src="'../../images/'+good_img2+'.jpg'" /></a></div>
                <div class="mui-slider-item"><a href="#"><img :src="'../../images/'+good_img3+'.jpg'" /></a></div>
            </div>
        </div>
        <!--标题-->
        <div class="good-detail-title">
            {{obj.title}}
        </div>
        <hr>
        <div class="good-detail-price">
            价格：
            <span class="now-price">￥{{obj.newprice}}</span>
            <span class="old-price">￥{{obj.oldprice}}</span>
        </div>
        <hr>
        <div class="good-detail-size">
            <p>尺码：</p>
            <span class="size">35</span>
            <span class="size">36</span>
            <span class="size">37</span>
            <span class="size">38</span>
            <span class="size">39</span>
            <span class="size">40</span>
            <span class="size">41</span>
            <span class="size">42</span>
            <span class="size">43</span>
            <span class="size">44</span>
            <span class="size">45</span>
            <span class="size">46</span>
        </div>
        <hr>
        <div class="good-detail-number">
            购买数量
            <div class="mui-numbox fliter" data-numbox-step='1' data-numbox-min='1' data-numbox-max='10'>
                <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
                <input class="mui-numbox-input" type="number" ref="numbox" @change="getCount"/>
                <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
            </div>
            <span>剩余数量:</span><span>{{obj.count}}</span>
            <p>
            <button type="button" class="mui-btn mui-btn-warning " @click="push2Cart">查看购物车</button>
            <button type="button" class="mui-btn mui-btn-danger" @click="add2Cart">加入购物车</button>
            </p>
        </div>
    </div>
</template>

<script>
    import mui from '../../lib/dist/js/mui.js'
    import {Toast} from 'mint-ui'
    export default {
        data(){
            return{
                good_id:this.$route.params.id,
                obj:{},
                good_img1:'',
                good_img2:'',
                good_img3:'',
                now_price:1,
                number:1,
                title:'',
                size:34,
            }
        },
        methods:{
            getGoodDetail(){
                this.$http.get('http://127.0.0.1:3002/getGoodDetail?id='+this.good_id).then((result)=>{
                    if(result.body.status === 0){
                        this.obj = result.body.message[0];
                        this.good_img1 = this.obj.good_img1;
                        this.good_img2 = this.obj.good_img2;
                        this.good_img3 = this.obj.good_img3;
                        this.now_price = parseInt(this.obj.newprice);
                        this.title = this.obj.title;
                    }else {
                        Toast('您的网络抽风了');
                    }
                });
            },
            getCount(){
                this.number = parseInt(this.$refs.numbox.value);
            },
            add2Cart(){
                var obj = {
                    user_id:parseInt(this.$store.state.user_id),
                    price:this.now_price,
                    count:this.number,
                    title:this.title,
                    selected:true,
                    size:parseInt(JSON.parse(localStorage.getItem('cart')).size),
                    good_id:this.good_id,
                };
                //mui.confirm('')
                console.log(obj);
                this.$http.post('http://127.0.0.1:3002/addToCart',obj,{emulateJSON:true}).then((result)=>{
                    if(result.body.status === 0){
                        Toast(result.body.message);
                        localStorage.removeItem('cart');
                    }else{
                        Toast('您的网络抽风了');
                    }
                })
            },
            func(callback){

                var spans = document.querySelectorAll('.size');
                //console.log(spans);
                for (let i = 0; i < spans.length; i++) {
                    spans[i].onclick = function () {
                        for(let i = 0; i < spans.length; i++){
                            spans[i].classList.remove('active');
                        }
                        this.classList.add('active');
                        callback(this.innerText,this.good_id);
                    }
                }
            },
            push2Cart(){
                this.$router.push('/cart')
            }
        },
        created(){
            this.getGoodDetail();
            /**/
        },
        mounted() {
            var gallery = mui('.mui-slider');
            gallery.slider({
                interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
            });
            mui('.mui-numbox').numbox();
            this.func(function (size,id) {
                //this.size = size;
                localStorage.setItem('cart',JSON.stringify({size:size}))
            });
        },
        updated() {

        }
    }
</script>

<style scoped lang="css">
    .good-detail-title{
        font-size: 14px;
        padding: 15px;
        height: 50px;
        line-height: 28px;
        text-align: center;
        /*background-color: green;*/
    }
    .mui-slider img{
        vertical-align: top;
        height: 250px;

    }
    .good-detail-price{
        padding: 10px;
        font-size: 14px;
    }
    .good-detail-price .now-price{
        font-size: 24px;
        font-weight: bold;
        color: orange;
        margin-right: 10px;
    }
    .good-detail-price .old-price{
        text-decoration: line-through;
    }
    .good-detail-size{

        padding: 10px;
       /* background-color: red;*/
    }
    .good-detail-size span{
        width: 28px;
        height: 28px;
        display: inline-block;
        border-radius: 50%;
        border: 1px solid #0f0f0f;
        text-align: center;
        line-height: 28px;
        margin-right: 8px;
        margin-top: 8px;
    }
   .good-detail-number{
       padding: 10px;
   }
    .good-detail-number .fliter{
        margin-bottom: 20px;
    }
    .good-detail-number  span{
        font-size: 14px;
    }
    .active{
        background-color: orangered;
    }
</style>